import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../utils/api';
import { RequestError } from '../utils/request';
import { ErrorCode } from '../utils/errorCode';
import { userStorage, tokenStorage } from '../utils/storage';
import './Login.css';

function Login() {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  // 检查是否已登录（免登录）
  useEffect(() => {
    const userInfo = userStorage.getUserInfo();
    if (userInfo && userInfo.phone) {
      console.log('用户已登录，自动跳转:', userInfo);
      // 用户信息存在且未过期，直接跳转到主页
      navigate('/main/case', { replace: true });
    }
  }, [navigate]);

  const handleLogin = async (e) => {
    e.preventDefault();
    
    // 表单验证
    if (!phone) {
      alert('请输入手机号');
      return;
    }
    if (!password) {
      alert('请输入密码');
      return;
    }

    // 验证手机号格式
    const phoneReg = /^1[3-9]\d{9}$/;
    if (!phoneReg.test(phone)) {
      alert('请输入正确的手机号');
      return;
    }

    setLoading(true);
    
    try {
      // 调用登录接口
      const data = await api.user.login(phone, password);
      
      // 存储登录信息
      if (data.token) {
        tokenStorage.setToken(data.token);
      }
      
      const userInfo = {
        phone: phone,
        nickName: data.nickName || data.userName || data.name || ('用户' + phone.slice(-4)),
        userId: data.userId || data.id,
        role: data.role, // 保存用户角色
        ...data
      };
      
      // 使用 storage.js 的方法存储用户信息（会自动设置过期时间）
      userStorage.setUserInfo(userInfo);
      
      // 登录成功提示
      console.log('登录成功:', userInfo);
      
      // 跳转到主页
      navigate('/main/case');
      
    } catch (error) {
      // 错误处理
      setLoading(false);
      
      if (error instanceof RequestError) {
        // 业务错误
        switch (error.code) {
          case ErrorCode.USER_NOT_FOUND:
            alert('用户不存在，请检查手机号');
            break;
          case ErrorCode.PASSWORD_ERROR:
            alert('密码错误，请重新输入');
            break;
          case ErrorCode.INVALID_PARAMS:
            alert('参数错误，请检查输入');
            break;
          default:
            // 其他错误已由 request 自动显示
            console.error('登录失败:', error.message);
        }
      } else {
        // 网络错误
        console.error('登录请求失败:', error);
      }
    }
  };

  return (
    <div className="login-container">
      <div className="login-box">
        <h1>Care Spirit 管理系统</h1>
        <form onSubmit={handleLogin}>
          <div className="form-group">
            <label>手机号</label>
            <input
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              placeholder="请输入手机号"
              maxLength="11"
            />
          </div>
          <div className="form-group">
            <label>密码</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
            />
          </div>
          <button type="submit" className="login-btn" disabled={loading}>
            {loading ? '登录中...' : '登录'}
          </button>
        </form>
      </div>
    </div>
  );
}

export default Login;

